// 纹理：


import React, { Component } from 'react';
import './index.css';
import * as THREE from 'three';    //引入three基础相关的所有模块
import { Scene } from 'three';
import Stats from 'three/examples/js/libs/stats.min.js';  //引入状态监测
import TWEEN from "@tweenjs/tween.js";
import * as dat from 'dat.gui';
import Background from '../../assets/image/background.png'
import { render } from 'less';


 
class Three5 extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
  
    initThree = () => {   // 初始化，准备数据  四大组件：场景、相机、渲染器、几何体
        threeStart();

        var scene;
        function initScene() {    // 1、初始化 场景sence
            scene = new THREE.Scene();
        }

        var camera;
        function initCamera() {   // 2、初始化 相机camera 
            //（透视相机） PerspectiveCamera( fov, aspect, near, far ): 视角的度数，显示范围的宽高比，最近的距离，最远看到的距离
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);  

           /// 设置相机 的位置(position/up/lookat 三个方向确定了相机的唯一位置方向)
            camera.position.set(0,0,600)   // 400,400,400
            camera.up.set(0,1,0);  
            camera.lookAt(0,0,0);  
        }
 
 
        var renderer,width,height,stats;
        function initRender() {   // 3、初始化 渲染器render
            width = window.innerWidth;
            height = window.innerHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true   
            });
            renderer.setSize(width, height);   // 设置 渲染器的大小（页面大小）
            document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 将渲染器渲染的内容添加到窗口上（固定写法）
            renderer.setClearColor(0xFFFFFF, 1.0);  // 设置渲染器颜色（清除时）
        }

        var light;
        function initLight() {  // 初始化 灯光
          light = new THREE.AmbientLight(0xFFFF8F);  
          light.position.set(300, 300, 0);
          scene.add(light);   
        }

 
        var mesh,geometry,material;
        function initObject() {   ///4、定义一个几何体，显示在页面上的物体
          // 长方形：长、宽、长分段、宽分段
          //geometry = new THREE.PlaneGeometry(300, 300,2,3);  


          // 画三角形（没有现成的）：
          geometry = new THREE.Geometry(); 
          material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});  // 显示线段，不填充颜色：wireframe:true

          // 新建 顶点
          var p1 = new THREE.Vector3(100,0,0);
          var p2 = new THREE.Vector3(0,100,0);
          var p3 = new THREE.Vector3(-100,0,0);
          // 新建 颜色
          var color1 = new THREE.Color(0xFF0000);
          var color2 = new THREE.Color(0x00FF00);
          var color3 = new THREE.Color(0x0000FF);
          // 将 顶点 放入 geometry
          geometry.vertices.push(p1);
          geometry.vertices.push(p2);
          geometry.vertices.push(p3);
          // 新建 面face 
          var face = new THREE.Face3(0,1,2); 
          face.vertexColors[0] = color1;  // 给 面face 的 顶点vertex附颜色
          face.vertexColors[1] = color2;
          face.vertexColors[2] = color3;
          // 将 face 放入
          geometry.faces.push(face);

          mesh = new THREE.Mesh(geometry, material);  
          mesh.position.set(0, 0, 0);  
          scene.add(mesh);  

          var axisHelper = new THREE.AxisHelper(400);  // 添加一个坐标系，长度为400
          scene.add(axisHelper);
        } 

        // var param;
        // function createUI() {  
        //   var ParamObj = function(){   // 默认视角为45度
        //     this.repeat = 1;  // 纹理材质，重复
        //     this.wrap = 1000;  // 纹理材质，回环
        //   }  
        //   param = new ParamObj();  
        //   var gui = new dat.GUI();
        //   gui.add(param,"repeat",1,5).name("纹理重复");
        //   gui.add(param,"repeat",1,5).name("纹理重复");
        //   gui.add(param,"repeat",1,5).name("纹理重复");
        //   gui.add(param,"wrap",1000,1002).name("纹理回环").step(1); // 不能有小数，每次加1
        // }

        
        
 
        function threeStart(){
          initScene();   // 场景
          initCamera();  // 相机
          initRender();  // 渲染器
          initObject();  // 几何体
          initLight(); // 光

          //render.clear();
          renderer.render(scene, camera);    // 通过场景sence和相机crame一起，用 渲染器 渲染出来
         
        }
    }
 
    /**
     * 开始Three
     *
     * @memberof ThreeBim
     */
    componentDidMount(){
        this.initThree();
    }
    render() {
        return (
          <div id='canvas-frame'></div>
        );
    }
}
 
export default Three5;